<style>
.rt-ql-editor{min-height:200px;}
.ql-toolbar.ql-snow .ql-formats {margin-right: 5px;}
/* 调整样式 */
:deep(.ql-editor) {min-height: 180px;}
:deep(.ql-formats) {  height: 21px; line-height: 21px;}
.richButton-hidden{display:none;}

</style>

<template>

<div>
<QuillEditor ref="myQuillEditor" id="richText" theme="snow" :key="value" v-model:content="content" :options="editorOptions"  contentType="html" @blur="setValue" class="rt-ql-editor" />

<!-- 使用自定义图片上传,如未使用下方的图片上传和视频上传，将直接转成base64形式存储 -->
<input type="file" accept="image/*" id="richImg" class="richImg richButton-hidden" @change="uploadImage" >
<input type="file" accept="video/*" id="richVideo" class="richVideo richButton-hidden" @change="uploadVideo">

<button @click="moni" style="margin-top:30px;">模拟图片上传</button>


</div>

</template>

<script>
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import "quill-image-resize-module/image-resize.min.js";

//import { imageDrop } from "quill-image-drop-module";
//Quill.register('modules/imageDrop', imageDrop);

    export default {
        name: "richText",
        components:{ QuillEditor },
        props:['value'],
        data() {
            return {
                content:'',
                editorOptions:{
                    modules: {
                        //imageDrop:true,
                        imageResize:{
                            displayStyles:{
                                backgroundColor: 'black',
                                border: 'none',
                                color: 'white'
                            },
                            modules:['Resize','DisplaySize','Toolbar'],
                        },
                        toolbar:{
                            container:[
                                ['bold', 'italic', 'underline', 'strike'],
                                ['blockquote', 'code-block'],
                                [{ 'size': ['small', false, 'large', 'huge'] }],
                                [{ 'font': [] }],
                                [{ 'align': [] }],
                                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                                [{ 'indent': '-1' }, { 'indent': '+1' }],
                                [{ 'header': 1 }, { 'header': 2 }],
                                ['image'],
                                [{ 'direction': 'rtl' }],
                                [{ 'color': [] }], 
                                [{ 'background': [] }]
                            ],
                            handlers: {
                                //如果需要上传图片/视频 到后台，然后在富文本框添加图片的地址，则可在handlers 里添加图片/视频处理函数。如果可以接受图片在富文本框中是base64形式，则无需设置。
                                'image': function (value) {
                                    if (value) {
                                        document.querySelector('.richImg').click();
                                    }
                                },
                                'video':function(value){
                                    if (value) {
                                        document.querySelector('.richVideo').click();
                                    }
                                }
                            },
                        } 
                    },
                    placeholder: '请输入内容...',
                },
                titleConfig:[
                    {Choice:'.ql-bold',title:'加粗'},
                    {Choice:'.ql-italic',title:'斜体'},
                    {Choice:'.ql-underline',title:'下划线'},
                    {Choice:'.ql-header',title:'段落格式'},
                    {Choice:'.ql-strike',title:'删除线'},
                    {Choice:'.ql-blockquote',title:'块引用'},
                    {Choice:'.ql-code',title:'插入代码'},
                    {Choice:'.ql-code-block',title:'插入代码段'},
                    {Choice:'.ql-font',title:'字体'},
                    {Choice:'.ql-size',title:'字体大小'},
                    {Choice:'.ql-list[value="ordered"]',title:'编号列表'},
                    {Choice:'.ql-list[value="bullet"]',title:'项目列表'},
                    {Choice:'.ql-direction',title:'文本方向'},
                    {Choice:'.ql-header[value="1"]',title:'h1'},
                    {Choice:'.ql-header[value="2"]',title:'h2'},
                    {Choice:'.ql-align',title:'对齐方式'},
                    {Choice:'.ql-color',title:'字体颜色'},
                    {Choice:'.ql-background',title:'背景颜色'},
                    {Choice:'.ql-image',title:'图像'},
                    {Choice:'.ql-video',title:'视频'},
                    {Choice:'.ql-link',title:'添加链接'},
                    {Choice:'.ql-formula',title:'插入公式'},
                    {Choice:'.ql-clean',title:'清除字体格式'},
                    {Choice:'.ql-script[value="sub"]',title:'下标'},
                    {Choice:'.ql-script[value="super"]',title:'上标'},
                    {Choice:'.ql-indent[value="-1"]',title:'向左缩进'},
                    {Choice:'.ql-indent[value="+1"]',title:'向右缩进'},
                    {Choice:'.ql-header .ql-picker-label',title:'标题大小'},
                    {Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'},
                    {Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'},
                    {Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'},
                    {Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'},
                    {Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'},
                    {Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'},
                    {Choice:'.ql-header .ql-picker-item:last-child',title:'标准'},
                    {Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'},
                    {Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'},
                    {Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'},
                    {Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'},
                    {Choice:'.ql-align .ql-picker-item:first-child',title:'居左对齐'},
                    {Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'},
                    {Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'},
                    {Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'}
                ],
                
            };
        },
        created:function(){
            this.content = JSON.parse(JSON.stringify(this.value));
        },
        watch:{
            //获取父组件的值，更新内容
            value:{
                handler(newData,oldData){
                    this.setInitValue();
                },
                deep:true,
                immediate:false
            },
        },
        mounted(){
            this.addQuillTitle();
            this.$el.children[0].value = this.value;
        },
        methods: {
            //模拟图片上传
            moni(){
                this.upFile('test','image');
            },
            //设置初始值
            async setInitValue(){
                let szContent = JSON.parse(JSON.stringify(this.value));
                this.content = szContent;
            },
            
            //上传图片
            async uploadImage(e){  
                this.upFile('a','image');            
                //var file = document.getElementById('richImg').files[0];
                //console.log('图片',file);
                //await this.upFile(file,'image');
                //e.target.value = '';
            },
            
            //上传视频
            async uploadVideo(e){              
                var file = document.getElementById('richVideo').files[0];
                await this.upFile(file,'video');
                e.target.value = '';
            },
            //上传文件的api
            async upFile(file,type){
                //上传方法：
                //const data  = new FormData();
                //使用append存储信息，append('键名','键值')
                //data.append('files',file);  
                //let objResult = await $axios.post("api/base/uploadfilelocal",data,{
                    //"Content-Type": "multipart/form-data;boundary=" + new Date().getTime(),
                //});
                //console.log('objResult',objResult);//{szUrl:'上传文件地址'}
                //模拟图片上传后，添加图片到富文本框
                this.insertImg('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png','image');
            },
            //插入图片
            insertImg(url,type){         

                var container = document.querySelector("#richText");
                var quill = new Quill(container);

                //range 是光标位置，但是这里找不到
                let range = quill.getSelection();
                let length = (this.content).length || 0;//无法获取光标的位置，暂时先放在文本最后。如果你有解决方案，欢迎告知~
                //let length = quill.getSelection().index;
                quill.insertEmbed(length,type,url);
                quill.setSelection(length+1);
            },
            
            //值返回父组件
            setValue(){
                this.$emit('on-richText',this.content);
            },
            //toobar的提示
            addQuillTitle() {
                let titleConfig = JSON.parse(JSON.stringify(this.titleConfig));
                //console.log('this.titleConfig',titleConfig);
                document.getElementsByClassName('ql-editor')[0].dataset.placeholder='';
                for(let item of titleConfig){
                    let tip = document.querySelector('.ql-toolbar '+ item.Choice);
                    if (!tip) continue
                    tip.setAttribute('title',item.title);
                }
	      	},

        },
    }
  
</script>